<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐列表</title>
    <link rel="stylesheet" href="./playdemo.css">
    <!-- 引入Vue.js -->
    <!-- <script src="./vue.js"></script> -->
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
    <style>
        /* body { max-width: 800px; margin: 0 auto; padding: 20px; }
        h1 { color: #333; }
        ul { list-style: none; padding: 0; }
        li { padding: 10px; margin-bottom: 10px; background-color: #f5f5f5; border-radius: 4px; } */
    </style>
</head>
<body>
    <div id="app">
        <div class="sound"></div>
    <!-- <audio src="https://xl-z4869.github.io/kum_kit/sounds/openhat.wav" controls ></audio> -->
    <div class="box">
        <div class="left">
            <ul >
                <li v-for="(item,index) in musics" @click="play" :data-id="item.id" >
                    <span>{{item.keyTrigger}}</span>
                     <audio  :src="item.url"></audio>
                </li>
               

                <!-- <li>q</li>
                <li>w</li>
                <li>e</li>
                <li>a</li>
                <li>s</li>
                <li>d</li>
                <li>z</li>
                <li>x</li>
                <li>c</li> -->
            </ul>
            
        </div>
        <div class="right">
            <div class="btn">
                <p>power</p>
                <div class="open" @click="open"></div>
            </div>
            <div class="name">{{name}}</div>
            <input type="range" class="range">
            <div class="btn">
                <p>bank</p>
                <div class="open" @click="open"></div>
            </div>
        </div>
    </div>
    </div>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                name:'',
                flag:false,
                musics: [] ,
                curIndex:-1,
            },
            created() {
                this.fetchmusics();
            },
           
            methods:{
                async fetchmusics() {
                    try {
                        const res = await axios.get('http://121.89.213.194:3001/api/music');
                        console.log(res.data.data )
                        this.musics = res.data.data;  
                    } catch (error) {
                        console.error('获取用户数据失败:', error);
                    }
                },
                play(e){
                    // console.log(e.target.lastElementChild.src)
                    // console.log(e.target.getAttribute('data-id'))
                    if(this.flag){
                        let dataID = e.target.getAttribute('data-id');
                        let newdata = this.musics.find(item => item.id == dataID);
                        // console.log(newdata.url)
                        if(newdata){
                            this.name=newdata.id;
                       
                            e.target.lastElementChild.src=newdata.url
                            e.target.lastElementChild.play()
                            
                            // console.log(e.target.lastElementChild)
                            console.log(newdata.url)
                            console.log(newdata)
                        }
                    }
                    
                },
                open(e){
                     if(e.target.className.includes('open')){
                        if(e.target.classList.contains('active')){
                            e.target.classList.remove('active')
                        this.flag=false;
                        this.name='';
                        }else{
                            e.target.classList.add('active')
                        this.flag=true;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>